$(function(){
	//不同浏览器会有不同的默认效果,所以自定义多媒体
	//方法：load(),play(),pause()
	//属性:currentSrc、currentTime、duration
	//事件:oncanplay、ontimeupdate、onended等
	//这些api是原生js操作
	var video=$('video').get(0);//jquery转换dom对象
	//当浏览器可以播放视频时就
	//1.让video显示出来和总时间
	video.oncanplay=function(){//oncanplay是video原生事件
		$('video').show();
		//获得视频长度,duration是视频属性
		//返回的是秒为单位,所以要计算时分秒
		var totalTime=formatTime(video.duration);
		$('.total').html(totalTime);//放入总时长
	}
	//转换时分秒
	function formatTime(time){
		var h=Math.floor(time/3600);
		var m=Math.floor(time%3600/60);
		var s=Math.floor(time%60);
		return (h<10 ? '0'+h:h)+':'+(m<10 ? '0'+m:m)+':'+(s<10 ? '0'+s:s);
	}
	//2.点击按钮，如果有fa-play就切换fa-pause，并播放
	$('.switch').on('click',function(){
		if($(this).hasClass('fa-play')){
			video.play();//play方法是原生js要用dom
			//切换暂停和播放状态的图标
			$(this).addClass('fa-pause').removeClass('fa-play');
		}else{
			video.pause();
			$(this).addClass('fa-play').removeClass('fa-pause');
		}
	});
	//3.进度条显示
	//只要修改了video.currentTime，就会执行ontimeupdata事件
	video.ontimeupdate=function(){
		//获取当前时间video.currentTime
		//进度条的宽度=当前时间/总时间*100+'%'
		var w=video.currentTime/video.duration*100+'%';
		$('.line').css('width',w);
		//显示当前时间
		$('.current').html(formatTime(video.currentTime));
	}
	//4.全屏
	$('.expand').on('click',function(){
		if($(this).hasClass('fa-arrows-alt')){
			video.webkitRequestFullScreen();//全屏显示
			$(this).addClass('fa-compress').removeClass('fa-arrows-alt');
		}else{
			document.webkitCancelFullScreen();//取消全屏,与元素无关
			$(this).addClass('fa-arrows-alt').removeClass('fa-compress');
		}
	});
	//5.视频播放完毕,onended事件，重置
	video.onended=function(){
		//当前视频时间清0，同时播放按钮处于play状态
		video.currentTime=0;
		$('.switch').addClass('fa-play').removeClass('fa-pause');
	}
	//6.点击进度条跃进
	$('.bar').on('click',function(event){
		//点击位置/bar长度*总时长=当前视频播放位置
		var offset=event.offsetX;
		//当前播放位置,播放时间
		var current=offset/$(this).width()*video.duration;
		video.currentTime=current;
	});
});